.container {
    display: flex;
    /* 1000 - flex-basis 500px */
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-color: antiquewhite;
    flex-wrap: wrap;
    align-items: flex-start;
}

.item {
    width: 600px;
    /* height: 30%; */
    box-sizing: border-box;
    border: 2px solid gray;
    /* order 确认布局的顺序 默认是0 按照书写顺序 */
    /* 当同时设置flex-basis和width时 flex-basis 生效 */
    /*  */
    flex-basis: 500px;
}
/* .item:nth-of-type(1) {
    order: 1;
}

.item:nth-of-type(4) {
    order: -1;
}  */

.item:nth-of-type(4) {
    /* order 值越小排列越靠前 */
    /* order: -100; */
    /* flex-grow 在主轴方向是否拉伸 默认值0 不拉伸 */
    /* 按照主轴方向元素的拉伸比例平分剩余空间 然后分配指定比例 */
    /* flex-grow: 3; */
    /* flex-shrink 控制在主轴方向是否缩放 默认值是1 默认是缩放  */
    /* 0.5 其他正常值的缩放比例 */
    /* flex flex-grow flex-shrink flex-basis 缩写 */

    /* flex-shrink: 0.5; */
    /* flex: 1 1 0; */
    /* flex: 1; */
}

.item:nth-of-type(3) {
    /* order: -99; */
    /* flex-grow: 1; */
}

.item:nth-of-type(1) {
    /* order: -98; */
    /* align-self 作用与align-items【设置了所有项目】一样 设置某一个项目替换掉align-items属性 */
    align-self: baseline;
}

.item:nth-of-type(2) {
    /* order: -89; */
}